var simuParams = {};

function addNavBarEvent() {
    
    $("header li").click(function() {
        
        // add `active` class for clicked `li`
        $(this)
            .siblings().removeClass('active')
        .end()
            .addClass('active');

        // display the `div` has the className with `a[href]` 
        var className = $(this).children('a').attr('href');
        $("div[id]").css({"display": "none"});
        $(className).css({"display": "block"});
    });
}

function updateFlowSrcDst() {

    var $src = $("#src"),
        $dst = $('#dst');

    for (var i = 0; i < simuParams.hostNum; i++) {
        if (i !== simuParams.ctrlPos) {
            $('<option value="' + i + '">' + i + '</option>').appendTo($src);
            $('<option value="' + i + '">' + i + '</option>').appendTo($dst);
        }
    }
}

function addBasicEvent() {

    $("#topoType").change(function () {

        var level = $(this).val();

        if (level == 2) {
            $("div.level2").css({"display": "block"});
            $("div.level3").css({"display": "none"});
        } else {
            $("div.level2").css({"display": "none"});
            $("div.level3").css({"display": "block"});    
        }
    });

    $("#confirm").click(function () {
        
        simuParams = {
            topoLevel: Number($("#topoType").val()),
            pHostNum:  Number($("#phostnum").val()),
            ctrlPos:   Number($("#ctrlpos").val()),
            simuTime:  Number($("#simutime").val()),
            outFile:   Number($("#outfile").val())
        };

        if (simuParams.topoLevel == 2) {
            simuParams.uSwitchNum = Number($("#uswitchnum").val());
            simuParams.lSwitchNum = Number($("#lswitchnum").val());
            simuParams.switchNum = simuParams.uSwitchNum + 
                                   simuParams.lSwitchNum;
            simuParams.hostNum = simuParams.lSwitchNum * 
                                 simuParams.pHostNum;
        } else {
            simuParams.coreSwitchNum = Number($("#coreswitchnum").val());
            simuParams.podNum = Number($("#podnum").val());
            simuParams.pSwitchNum = Number($("#pswitchnum").val());
            simuParams.switchNum = simuParams.coreSwitchNum + 
                                   simuParams.podNum * simuParams.pSwitchNum * 2;
            simuParams.hostNum =  simuParams.podNum * 
                                  simuParams.pSwitchNum *
                                  simuParams.pHostNum; 
        }

        console.log(simuParams);
        updateFlowSrcDst();
    });
}

function addCDFEvent() {

    // add a CDF distrubtion rule
    $("#addCDFBtn").click(function () {
        
        var $flowSize = $("#flowsize"),
            $cdfValue = $("#cdfvalue"),
            $tmpTbl = $("#tempcdf");

        $tmpTbl.css({"display": "block"});
        
        $("<tr>" + 
            "<td>" + $flowSize.val() + "</td>" + 
            "<td>" + $cdfValue.val() + "</td>" +
          "</tr>"
        ).appendTo($tmpTbl.children("tbody"));

        $flowSize.val("");
        $cdfValue.val("");

    });

    // display a complete CDF distrubtion
    $("#confirmCDFBtn").click(function () {

        var $tmpTbl = $("#tempcdf"),
            $cdfName = $("#cdfname");

        $('<div class="form-group">' + 
            '<div class="col-md-offset-2 col-md-6">' +
              '<table class="table table-hover">' + 
                $tmpTbl.html() + 
              '</table>' + 
            '</div>' +
          '</div>'
        ).appendTo($("#cdf form"));

        // reset 
        $tmpTbl.children('tbody').html("");
        $tmpTbl.css({"display": "none"});
        $cdfName.val("");
    });
}

function addFlowEvent() {

    $("#addflow").click(function () {

        var $granularity = $("#granularity"),
            $src = $("#src"),
            $dst = $("#dst"),
            $protoType = $("#prototype"),
            $flowNum = $("#flownum"),
            $flowTrace = $("#flowtrace"),
            $flowTbl = $("#flowstats");

        $flowTbl.css({"display": "block"});
        
        $("<tr>" + 
            "<td>" + $granularity.val() + "</td>" + 
            "<td>" + $src.val() + "</td>" +
            "<td>" + $dst.val() + "</td>" +
            "<td>" + $protoType.val() + "</td>" +
            "<td>" + $flowNum.val() + "</td>" +
            "<td>" + $flowTrace.val() + "</td>" +
          "</tr>"
        ).appendTo($flowTbl.children("tbody"));

        $granularity.val("主机");
        $src.val("1");
        $dst.val("1");
        $protoType.val("HTTP");
        $flowNum.val("");
        $flowTrace.val("真实Trace数据");
    });
}

$(function () {

    addNavBarEvent();
    addBasicEvent();
    addCDFEvent();
    addFlowEvent();

});